<template>
  <div class="pie-chart"  style="width: 100%; height: 100%" :id="echartsId"></div>
</template>

<script setup>
import { defineProps, onMounted, watch } from 'vue';
import * as echarts from 'echarts';

// Props
const props = defineProps({
  echartsId:{
    type: String,
    default: 'asasa'
  },
  // 饼图的标题
  title: {
    type: String,
    default: ''
  },
  data: {
    type: Array,
    default: () => []
  }
});
let colorList = [
  "#329BFF",
  "#48DCF3",
  "#FFD042",
  "#F3488C",
  "#5F48F3",
 "#F39348","#A048F3","#48F3C1","#F34848","#48F381"];
function generateRandomColorList(count) {
  const colorList = [];
  for (let i = 0; i < count; i++) {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    colorList.push(`rgb(${r},${g},${b})`);
  }
  return colorList;
}
// 超出制定颜色多余生成随机颜色
if(props.data.length >10) colorList = colorList.concat(generateRandomColorList(props.data.length-10))
// ECharts 实例
let chartInstance = null;

// 初始化图表
const initChart = () => {
  if (props.echartsId) {
    chartInstance = echarts.init(document.getElementById(props.echartsId));
    const option = {
      tooltip: {
        backgroundColor:"rgba(0,0,0,0)",
        borderColor:"rgba(0,0,0,0)",
        triggerOn: "mousemove",
        enterable:true,
        shadowBlur: 0,
        shadowColor: 'rgba(0, 0, 0, 0)',
        padding:[0],
        trigger: "item",
        textStyle: {
          color: '#fff', // 文本颜色
          fontSize: 24, // 文本大小
          fontWeight: 500,
        },
         formatter: "<span style='font-size:16px;'>{b}</span> <br/><span style='display:inline-blank;position:relative;top:-10px;'>{d}%</span>",
      },
      legend: {
        orient: 'horizontal', // 横向显示图例
        pageIconColor: '#ff781f', // 设置翻页箭头颜色
        pageTextStyle: {
          color: '#fff' // 设置翻页数字颜色
        },
        pageIconSize: 11, // 设置翻页箭头大小
        textStyle: { // 设置图例文字的样式
          color: '#fff',
          fontSize: 12
        },
        itemHeight: 10, // 设置图例项的高度
        itemWidth: 15, // 设置图例项的宽度
        left: "10%",
        top: "45%",
        width: 400,
        height: '70%', // 设置图例高度
        overflow: 'break',
        itemGap: 20,
        formatter: function(name){
          // let percent = 0;
          // let total = 0;
          // for (let i = 0; i < props.data.length; i++) {
          //     total += props.data[i].value;
          // }
          // const item = props.data.filter((item) => item.name === name)[0];
          // percent = (
          //     (item.value / total) *
          //     100
          // ).toFixed(1);
          //  return `${name}：${percent}%`;
            return `${name}`;
        }
      },
      series: [
        {
          type: "pie",
          center: ["45%", "25%"], // 饼图位置
          radius: ["30%", "50%"],
          avoidLabelOverlap: false,
          roseType:'radius',
          label: {
              show: false,
              position: "center"
          },
          itemStyle: {
              normal: {
                  color: function(params) {
                      return colorList[params.dataIndex];
                  }
              }
          },
          labelLine: {
              show: false
          },
          data: props.data
        }
      ]
    };
    chartInstance.setOption(option);
  }
};

// 监听 data 变化，更新图表
watch(() => props.data, () => {
  if (chartInstance) {
    chartInstance.setOption({
      series: [
        {
          data: props.data.map(item => ({
            value: item.value,
            name: item.name
          })),
        },
      ],
    });
  }
  console.log(props.data);
}, { deep: true });

// 在组件挂载后初始化图表
onMounted(() => {
  initChart();
});
</script>

<style scoped>
.pie-chart {
  width: 100%;
  height: 400px;
}
</style>